<!-- 生产信息 -->
<template>
  <div>
    <div class="title pl0">
      <h3>生产信息</h3>
      <el-button
        type="text"
        v-if="isDisable && isLocked == '待锁定'"
        @click="handleEdit"
        >编辑</el-button
      >
    </div>
    <el-form
      ref="formData"
      :model="formData"
      :rules="rules"
      label-width="130px"
    >
      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="生产方式:">
            <div :class="isDisable ? 'border_line' : ''">
              <el-select
                        filterable
                v-model="formData.productionMode"
                v-if="!isDisable"
                size="small"
                placeholder="请选择"
              >
                <el-option label="版辊尺寸" :value="1"> </el-option>
                <el-option label="数码版面" :value="2"> </el-option>
              </el-select>
              <span v-else>{{ format(formData.productionMode) }}</span>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="生产尺寸:">
            <div :class="isDisable ? 'border_line' : ''">
              <el-input
                v-model="formData.productionDimensions"
                v-if="!isDisable"
                placeholder="请输入内容"
                type="number"
                size="small"
              >
                <div slot="suffix" style="padding-right: 5px; padding-top: 3px">
                  <span v-if="formData.productionMode == 1">T</span>
                  <span v-else>mm</span>
                </div>
              </el-input>
              <span v-else
                >{{ formData.productionDimensions
                }}<span class="pl16" v-if="formData.productionMode == 1">T</span
                ><span class="pl16" v-else>mm</span></span
              >
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="间距:">
            <div :class="isDisable ? 'border_line' : ''">
              <el-input
                v-model="formData.makeupSpaceBetween"
                v-if="!isDisable"
                onkeyup="this.value = this.value.replace(/[^0-9/.]/,'');"
                placeholder="请输入内容"
                size="small"
              >
                <div slot="suffix" style="padding-right: 5px; padding-top: 3px">
                  mm
                </div>
              </el-input>
              <span v-else
                >{{ formData.makeupSpaceBetween
                }}<span class="pl16">mm</span></span
              >
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="跳距:">
            <div :class="isDisable ? 'border_line' : ''">
              <el-input
                v-model="formData.makeupSkipDistance"
                v-if="!isDisable"
                onkeyup="this.value = this.value.replace(/[^0-9/.]/,'');"
                placeholder="请输入内容"
                size="small"
              >
                <div slot="suffix" style="padding-right: 5px; padding-top: 3px">
                  mm
                </div>
              </el-input>
              <span v-else
                >{{ formData.makeupSkipDistance
                }}<span class="pl16">mm</span></span
              >
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="留边尺寸:">
            <div :class="isDisable ? 'border_line' : ''">
              <el-input
                v-model="formData.marginSize"
                type="number"
                v-if="!isDisable"
                placeholder="请输入内容"
                size="small"
              >
                <div slot="suffix" style="padding-right: 5px; padding-top: 3px">
                  mm
                </div>
              </el-input>
              <span v-else
                >{{ formData.marginSize }}<span class="pl16">mm</span></span
              >
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="印刷拼版:">
            <div :class="isDisable ? 'border_line' : ''">
              <el-input
                v-model="formData.makeupPrintingCombine"
                v-if="!isDisable"
                onkeyup="this.value = this.value.replace(/[^0-9,\*,\+,\),-]+/g,'');"
                placeholder="请输入内容"
                size="small"
              >
                <div slot="suffix" style="padding-right: 5px; padding-top: 3px">
                  mm
                </div>
              </el-input>
              <span v-else
                >{{ formData.makeupPrintingCombine
                }}<span class="pl16">mm</span></span
              >
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="刀模模数:">
            <div :class="isDisable ? 'border_line' : ''">
              <el-input
                v-model="formModel.makeupModules"
                v-if="!isDisable"
                onkeyup="this.value = this.value.replace(/[^0-9,\*,\+,\),-]+/g,'');"
                placeholder="请输入内容"
                size="small"
              >
                <div slot="suffix" style="padding-right: 5px; padding-top: 3px">
                  mm
                </div>
              </el-input>
              <span v-else
                >{{ formData.makeupModules }}<span class="pl16">mm</span></span
              >
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="平张断张:">
            <div :class="isDisable ? 'border_line' : ''">
              <el-input
                v-model="formData.makeupPzDz"
                onkeyup="this.value = this.value.replace(/[^0-9,\*,\+,\),-]+/g,'');"
                v-if="!isDisable"
                placeholder="请输入内容"
                size="small"
              >
                <div slot="suffix" style="padding-right: 5px; padding-top: 3px">
                  mm
                </div>
              </el-input>
              <span v-else
                >{{ formData.makeupPzDz }}<span class="pl16">mm</span></span
              >
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="色数:">
            <div :class="isDisable ? 'border_line' : ''">
              <el-input
                v-model="formData.makeupColors"
                v-if="!isDisable"
                onkeyup="this.value = this.value.replace(/[^0-9,+,]+/g,'');"
                placeholder="请输入内容"
                size="small"
              >
              </el-input>
              <span v-else>{{ formData.makeupColors }}</span>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="每组刀数:">
            <div :class="isDisable ? 'border_line' : ''">
              <el-input
                v-model.number="formData.knifeTimes"
                v-if="!isDisable"
                placeholder="请输入内容"
                size="small"
              >
                <div slot="suffix" style="padding-right: 5px; padding-top: 3px">
                  次
                </div>
              </el-input>
              <span v-else
                >{{ formData.knifeTimes }}<span class="pl16">次</span></span
              >
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="每组标签数:">
            <div :class="isDisable ? 'border_line' : ''">
              <el-input
                v-model="formData.eachGroupQuantity"
                v-if="!isDisable"
                type="number"
                placeholder="请输入内容"
                size="small"
              >
                <div slot="suffix" style="padding-right: 5px; padding-top: 3px">
                  枚
                </div>
              </el-input>
              <span v-else
                >{{ formData.eachGroupQuantity
                }}<span class="pl16">枚</span></span
              >
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="每组高度:">
            <div :class="isDisable ? 'border_line' : ''">
              <el-input
                v-model="formData.eachGroupHeight"
                v-if="!isDisable"
                type="number"
                placeholder="请输入内容"
                size="small"
              >
                <div slot="suffix" style="padding-right: 5px; padding-top: 3px">
                  mm
                </div>
              </el-input>
              <span v-else
                >{{ formData.eachGroupHeight
                }}<span class="pl16">mm</span></span
              >
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="每卷米数:">
            <div :class="isDisable ? 'border_line' : ''">
              <el-input
                v-model="formData.metersPerRoll"
                v-if="!isDisable"
                placeholder="请输入内容"
                type="number"
                size="small"
              >
              </el-input>
              <span v-else>{{ formData.metersPerRoll }}</span>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="24">
          <el-form-item label="刀版信息:">
            <div :class="isDisable ? 'border_line' : ''">
              <el-input
                v-model="formData.knifeInformation"
                v-if="!isDisable"
                placeholder="请输入内容"
                size="small"
              >
              </el-input>
              <span v-else>{{ formData.knifeInformation }}</span>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="24">
          <el-form-item label="印版信息:">
            <div :class="isDisable ? 'border_line' : ''">
              <el-input
                v-model="formData.plateInformation"
                v-if="!isDisable"
                placeholder="请输入内容"
                size="small"
              >
              </el-input>
              <span v-else>{{ formData.plateInformation }}</span>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="24">
          <el-form-item label="生产要求:">
            <div :class="isDisable ? 'border_line' : ''">
              <el-input
                v-model="formModel.productionRequirement"
                v-if="!isDisable"
                placeholder="请输入内容"
                type="textarea"
                :rows="3"
                size="small"
              >
              </el-input>
              <span v-else>{{ formData.productionRequirement }}</span>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="footer mt16" v-if="!isDisable">
      <el-button size="small" @click="handleCancel" :loading="loading"
        >取消</el-button
      >
      <el-button
        size="small"
        class="ml16"
        type="primary"
        :loading="loading"
        @click="hanldeSave"
        >保存</el-button
      >
    </div>
  </div>
</template>

      <script>
export default {
  props: {
    productCode: {
      type: String,
      default: () => {
        return "";
      },
    },
    isLocked: {
      type: String,
      default: () => {
        return "";
      },
    },
    isShowEdits:{
      type: Boolean,
      default: () => {
        return false;
      },
    },
    formModel: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  watch: {
    formModel: {
      immediate: true,
      handler(newVal, oldVal) {
        for (const key in this.formModel) {
          if(key != 'productSource'){
            if (this.formModel[key] == 0) {
              this.formModel[key] = "";
            }
          }
        }
        this.formData = this.formModel;
        this.formData.productCode = this.productCode;
      },
    },
  },
  data() {
    return {
      formData: {}, //表单
      rules: {}, //表单验证
      isDisable: true,
      loading: false,
    };
  },
  methods: {
    //保存
    hanldeSave() {
      this.loading = true;
      this.$api.business
        .UpdateProductProductionData(this.formData)
        .then((res) => {
          this.isDisable = true;
          this.loading = false;
          let obj = {
            state: 4,
            productCode: this.productCode,
          };
          this.$api.business.UpdateProductState(obj).then((res) => {
            this.isShowEdits = true
          this.$emit('showEditEvent',this.isShowEdits)
            this.$message.success("保存成功");
            this.getDetail(this.productCode);
          });
        })
        .catch(() => {
          this.loading = false;
        });
    },

    //编辑
    handleEdit() {
      if(this.isShowEdits){
        this.isDisable = false
        this.isShowEdits = false
        this.$emit('showEditEvent',this.isShowEdits)
      }else{
        this.$message.warning('有未保存的编辑，请保存后再编辑')
      }
    },

    //取消
    handleCancel() {
      this.$confirm("信息尚未保存，是否保存?", "提示", {
        confirmButtonText: "是",
        cancelButtonText: "否",
        type: "warning",
      })
        .then(() => {
          this.handleSave();
        })
        .catch(() => {
          this.isShowEdits = true
        this.$emit('showEditEvent',this.isShowEdits)
          this.getDetail(this.productCode);
          this.isDisable = true;
        });
    },

    handleVerification(e) {
      let verification = /[^0-9,\*,\+,\),）]+/g;
      console.log(verification.test(e));
      if (verification.test(e)) {
        e = "";
      }
    },

    checkNum(val) {
      const zhi = val.charAt(0);
      // 必须保证第一个为数字而不是.
      val = val.replace(/^\./g, "");
      // 如果第一位是负号，则允许添加
      if (zhi === "-") {
        val = "-" + val;
      }
      //数字千分位逗号分隔
      //var str = val.toString();
      //var reg = str.indexOf(".") > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g;
      //return str.replace(reg,"$1,");
      return val;
    },

    format(val) {
      let str = "";
      if (val == 1) {
        str = "版辊尺寸";
      } else if (val == 2) {
        str = "数码版面";
      }
      return str;
    },

    //获取详情
    getDetail(id) {
      this.$emit("init", "");
    },
  },
};
</script>

      <style lang="scss" scoped>
.footer {
  display: flex;
  justify-content: center;
}

.title h3:before {
  content: "" !important;
  padding-right: 9px !important;
  border-left: 3px solid #3f61f1;
}

.border_line {
  border-bottom: 1px solid #dcdfe6;
  height: 32px;
}
</style>
